<!DOCTYPE html>
<html lang="cmn-hans" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>新增用户</title>
	<link rel="stylesheet" th:href="@{/component/layui/css/layui.css}" media="all">
	<link rel="stylesheet" th:href="@{/dimples/css/dimples.css}"/>
	<link rel="stylesheet" th:href="@{/dimples/css/formSelects-v4.css}"/>
</head>
<!-- 自定义样式 -->
<style>
	#user-update {
		padding: 20px 25px 25px 0;
	}

	#user-update .layui-treeSelect .ztree li a, .ztree li span {
		margin: 0 0 2px 3px !important;
	}

	#user-update #submit {
		float: right;
	}
</style>

<body>
<div class="layui-fluid" id="user-update">
	<form class="layui-form" action="" lay-filter="user-update-form">
		<!-- hide 元素 Start -->
		<div>
			<div class="layui-form-item dimples-hide">
				<label class="layui-form-label dimples-form-item-require">角色id：</label>
				<div class="layui-input-block">
					<label>
						<input type="text" name="roleIds" id="roleIds" data-th-value="${user.roleId}">
					</label>
				</div>
			</div>
			<div class="layui-form-item dimples-hide">
				<label class="layui-form-label dimples-form-item-require">角色name：</label>
				<div class="layui-input-block">
					<label>
						<input type="text" name="roleNames" id="roleNames" data-th-value="${user.roleName}">
					</label>
				</div>
			</div>

			<div class="layui-form-item dimples-hide">
				<label class="layui-form-label dimples-form-item-require">用户id：</label>
				<div class="layui-input-block">
					<label>
						<input type="text" name="userId" data-th-value="${user.userId}">
					</label>
				</div>
			</div>
		</div>
		<!-- hide 元素 End -->

		<div class="layui-form-item">
			<label class="layui-form-label dimples-form-item-require">用户名：</label>
			<div class="layui-input-block">
				<label>
					<input type="text" name="username" minlength="4" maxlength="10"
								 data-th-id="${user.userId}" data-th-value="${user.username}"
								 lay-verify="range|username" autocomplete="off" class="layui-input" readonly>
				</label>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">手机：</label>
			<div class="layui-input-block">
				<label>
					<input type="tel" name="mobile" lay-verify="phone" data-th-value="${user.mobile}"
								 autocomplete="off" class="layui-input">
				</label>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">邮箱：</label>
			<div class="layui-input-block">
				<label>
					<input type="text" name="email" lay-verify="email" data-th-value="${user.email}"
								 maxlength="50" autocomplete="off"
								 class="layui-input">
				</label>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label dimples-form-item-require">角色：</label>
			<div class="layui-input-block">
				<label>
					<select name="roleId"
									lay-verify="required"
									xm-select-direction="down"
									xm-select="user-update-role"
									xm-select-skin="default">
					</select>
				</label>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">部门：</label>
			<div class="layui-input-block">
				<label for="user-update-dept"></label>
				<input type="text" name="deptId" id="user-update-dept"
							 lay-filter="user-update-dept"
							 class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label dimples-form-item-require">状态：</label>
			<div class="layui-input-block">
				<input type="radio" name="status" value="1" title="有效" th:field="${user.status}">
				<input type="radio" name="status" value="0" title="禁用" th:field="${user.status}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label dimples-form-item-require">性别：</label>
			<div class="layui-input-block">
				<input type="radio" name="gender" value="0" title="女性" th:field="${user.gender}">
				<input type="radio" name="gender" value="1" title="男性" th:field="${user.gender}">
				<input type="radio" name="gender" value="2" title="保密" th:field="${user.gender}">
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">备注：</label>
			<div class="layui-input-block">
				<label>
					<textarea name="description" data-th-text="${user.description}" maxlength="100"
										class="layui-textarea"></textarea>
				</label>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="user-update-form-submit"
								id="submit">
					立即提交
				</button>
			</div>
		</div>
	</form>
</div>
</body>
<script type="application/javascript" th:src="@{/component/layui/layui.js}"></script>

<script th:inline="javascript">
    var currentUser = [[${shiroUser}]];
</script>
<script type="application/javascript">
    layui.use(['pearDimples', 'form', 'xmSelect', 'validate', 'treeSelect', 'formSelects'], function () {
        var $ = layui.$,
            dimples = layui.pearDimples,
            layer = layui.layer,
            treeSelect = layui.treeSelect,
            formSelects = layui.formSelects,
            form = layui.form,
            $view = $('#user-update');

        form.render();
        formSelects.render();

        formSelects.config('user-update-role', {
            searchUrl: '/role',
            response: {
                statusCode: 200
            },
            beforeSuccess: function (id, url, searchVal, result) {
                var data = result.data;
                var tranData = [];
                for (var i = 0; i < data.length; i++) {
                    tranData.push({
                        name: data[i].roleName,
                        value: data[i].roleId
                    })
                }
                result.data = tranData;
                return result;
            },
            success: function () {
                let roleIds = $("#roleIds").val();

                var role = roleIds.split("|");
                for (let i = 0; i < role.length; i++) {
                    formSelects.value('user-update-role', role);
                }
            },
            error: function (id, url, searchVal, err) {
                console.error(err);
                dimples.alert.error('获取角色列表失败');
            }
        });

        treeSelect.render({
            elem: $view.find('#user-update-dept'),
            type: 'get',
            data: '/dept/select/tree',
            placeholder: '请选择',
            search: false,
            success: function () {
                treeSelect.checkNode('user-update-dept', String([[${user.deptId}]]));
            }
        });

        form.on('submit(user-update-form-submit)', function (data) {
            /*if (dimples.nativeEqual(data.field, currentUser)) {
                dimples.alert.warn('数据未作任何修改！');
                return false;
            }*/
            $.ajax({
                type: 'post',
                url: '/user/update',
                dataType: 'json',
                data: data.field,
                success: function (res) {
                    if (res.code === 200) {
                        parent.layer.closeAll();
                        parent.dimples.alert.success(String([[${user.username}]]) + ' 用户数据修改成功');
                        parent.$('#dimples-user').find('#query').click();
                    } else {
                        dimples.alert.error(data.message);
                    }
                },
            });
            return false;
        });
    });
</script>
</html>














